<template>
    <div class="result_wrapper">
        <Header :componentInfoHeader="componentInfoHeader" />
        <CenterControl pageType="result" 
            @resultFile="initFiles" 
            :hideHeader="hideHeader" 
            :resultType="showType * 1"/>

        <!-- <div class="head-info" :class="{topHide : arrowShow}" style="z-index: 99;background: #f2f3f4">
            <div class="info">
                <div class="info_one" style="width: 1px;height: 10px"></div>

                <div class="info_two">

                    <div class="info_two_one" v-if=" showMark " @click="initFiles(0)">
                        <i :class="{selected : files.showType == 0}"></i>
                        <span>标注结果</span>
                    </div>
                    <div class="info_two_two" v-if=" showCheck " @click="initFiles(1)">
                        <i :class="{selected : files.showType == 1}"></i>
                        <span>检查结果</span>
                    </div>
                    <div class="info_two_three" v-if=" showTest " @click="initFiles(2)">
                        <i :class="{selected : files.showType == 2}"></i>
                        <span>质检结果</span>
                    </div>

                </div>

                <div class="info_four" style="width: 20px;height: 20px;">
                    <i class="info_four_top" :class="{arrowShow : arrowShow}" @click="arrowShow =! arrowShow"></i>
                </div>
                <div class="info_three" style="float: right">
                    <i class="divide" style="margin-left: 0;"></i>
                </div>

            </div>
        </div> -->

        <div class="content" :class="{tophide : arrowShow}">
            <div class="content_left" @click="lebalLebals = false">
                <div class="file_list" style="display: none" :class="{listHide : listShow}">
                    <div class="file_out_box">
                        <div class="file_in_box">
                            <ul>
                                <li :class="{maked : item.status == 1, badcls : item.isBad == 1}" v-for="(item, index) in files.showList" :key="index" @click="skipFile(item)">
                                    <span>{{index}}.</span> {{item.name}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="content_left_top" id="drawing" style="position: relative;">
                    <i v-show="files.current && files.current.isBad === 1" style="font-style: normal;padding: 0px 16px 0 10px;height: 22px;line-height: 22px;text-align: center;background: #fcad1d;color: #fff;-webkit-border-radius: 0 10px 10px 0;-moz-border-radius: 0 10px 10px 0;-ms-border-radius: 0 10px 10px 0;-o-border-radius: 0 10px 10px 0;border-radius: 0 10px 10px 0;position: absolute;left: 0;top: 12px;z-index: 3;font-size: 14px;">坏数据</i>
                </div>
                <div class="content_left_bottom">
                    <div class="content_bottom_one">
                        <div class="zoom">
                            <i></i>
                            <span>{{vm.zoom|takeTwoDecimal}}</span>
                        </div>
                        <div class="rotate_out" @click="setImgRotate">
                            <i></i>
                            <span>{{vm.rotateDeg === 2 ? '90' : vm.rotateDeg === 3 ? '180' : vm.rotateDeg === 4 ? '270' : '0'}} °</span>
                        </div>
                        <div class="mdfigy_rate_out" @click="modifyTipsShow = !modifyTipsShow">
                            <i></i>
                            <span v-if="files.current && files.current.isBad === 0">修改率: {{pageModifyRate ? sigRate : showType === 0 ? files.current.result[0].markAverageRate : showType == 1 ? files.current.result[0].checkAverageRate : showType == 2 ? files.current.result[0].qualityAverageRate : '--'}}%</span>
                        </div>
                    </div>
                    <div class="content_bottom_two" style="margin-right:0;">
                        <div class="number">
                            <span>显示编号：</span>
                            <label for="switchCP" class="switch-cp">
                                <input id="switchCP" class="switch-cp__input" v-model="checkboxsGroup.serial" type="checkbox" @click="showTextContent()">
                                <div class="switch-cp__box" :class="{'switch-cp__box2' : checkboxsGroup.serial}"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content_right" style="width:240px;">
                <div class="content_right_two" @scroll="scroll($event)" style="height: 100%;">
                    <div class="content_lebal_one" :class="{ in : item.id + 'i' == selDrapClass}" @dragend="dragend($event)" @dragstart="dragStart($event, item)" :ref="'srl'+index" v-for="(item,index) in showList" :key="index" v-show="!item.isFrist && (interactive.screeningTag.length == 0 || interactive.screeningTag.indexOf(item.type) != -1)">
                        <div class="box" :class="{top : item.id + 's' == selDrapClass}" @dragover.stop="addHoverClass($event, item, 's')" @dragleave="dragleave($event)" @drop="changeOrder2(item)">
                            <div class="ins" :class="{listCldSty : item.alias.split('-').length > 1,seleted : item.id == vm.selectId}"></div>
                        </div>
                        <div class="clear_both" style="padding: 10px 0px;" :class="{listCldSty2 : item.alias.split('-').length > 1,seleted : item.id == vm.selectId}" @dragover.stop="addHoverClass($event, item, 'i')" @dragleave="dragleave($event)" @drop="pushChildren(item)">
                            <div class="content_lebal" @click="selAttrFn($event, index, item)">
                                <i :class="{bg1 : item.region == 'rect', bg2 : item.region == 'area', bg3 : item.region == 'polyline' }"></i>
                                <span class="lebal" style="width:140px">{{!!item.type ? item.type : item.unfold ? "" : item.text}}</span>
                                <a style="margin-right: 20px;">{{item.alias}}</a> /*{{item.pId=="0"?"":item.pId+"-"}}*/
                                <div class="textCope" style="font-size: 14px;" v-show="!item.unfold && !!item.type && !!item.text">{{item.text}}</div>
                            </div>
                            <div class="lebal_list" v-show="item.unfold">
                                <textarea style="font-size: 14px;font-weight: 800;font-family: '宋体';background-color:#fff;" v-model="item.text" disabled></textarea>
                            </div>
                        </div>
                        <div class="box" @dragover.stop="addHoverClass($event, item, 'x')" :class="{bottom : item.id + 'x' == selDrapClass}" @dragleave="dragleave($event)" @drop="changeOrder2(item, 'down')">
                            <div class="ins" :class="{listCldSty : item.alias.split('-').length > 1,seleted : item.id == vm.selectId}"></div>
                        </div>
                    </div>
                </div>
                <div class="right_bt_box" style="display: none;">
                    <span class="del" @click="delectSelectBox"></span>
                    <span class="sx" @click="filterBoxShow = true"></span>
                </div>
                <div class="sx_sel_box" v-show="filterBoxShow">
                    <div class="sx_top_box">
                        <span class="txt">筛选</span>
                        <span class="icon" @click="changeScreeningCls"></span>
                    </div>
                    <ul>
                        <li :class="{seleted : interactive.screeningTag.indexOf(ename) != -1}" v-for="(cname, ename) in checkType" :key="ename" @click="changeScreening(ename, cname)">{{cname}}</li>
                    </ul>
                </div>
                <div class="lebal-lebals" ref="lebals" v-show="false">
                    <span :class="{seleted : ename == vm.currentDrawData.type}" v-for="(cname, ename) in checkType" :key="ename" @click="selectTag(ename, cname)">{{cname}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from "@/components/mark/Header";
import CenterControl from "@/components/mark/centerControl";

export default {
    name: "ResultPage",
    data() {
        return {
            componentInfoHeader: {
                curName: "", // 文件名
                standardBtnShow: true, // 标注规范显示
                standardCnt: "", // 标注规范内容
                abandonBtnShow: false, // 重新认证按钮显示
                repulseBtnShow: false, // 打回按钮显示
                isRecheck: false, // 是否是复检环节
                saveBtnShow: false, // 保存按钮显示
                historyBtnShow: false, // 历史按钮显示
                shortcutBtnShow: true, //  快捷键展示
                submitBtnShow: false,
                closeBtnShow: true,
                shortcutkeys: [
                    {
                        key: "多边形",
                        value: "Z"
                    },
                    {
                        key: "矩形",
                        value: "A"
                    },
                    {
                        key: "快捷隐藏标记框",
                        value: "Tab"
                    },
                    {
                        key: "取消绘图",
                        value: "Esc"
                    },
                    {
                        key: "快速编辑",
                        value: "双击图形 / 选中 + Enter"
                    },
                    {
                        key: "拖拽图片",
                        value: "Space + 左键"
                    },
                    {
                        key: "撤销多边形绘制点",
                        value: "ctrl + Z"
                    },
                    {
                        key: "删除",
                        value: "右键"
                    }
                ], // 快捷键配置
                showVersionInfo: false // 展示历史按钮
            },
            base: {
                markName: "",
                markStandard: "",
                markTaskId: "",
                batchId: "",
                step: 0
            },
            showType: 0,    
            files: {
                // 文件信息
                lastIndex: 0, // 上次标注的文件id
                allInfo: [], // 全部数据
                showType: 0, // 0 标注数据 1 检查数据，2 质检数据
                showList: [],
                current: null, // 当前的数据
                curIndex: 0, // 当前数据的id
                allImage: [] // 全部的图片
            }, // 文件相关
            history: {
                show: false, //历史界面显示
                list: [], //历史文件列表
                allList: [],
                curIndex: 0,
                showVersionInfo: false, //历史显然界面显示
                textData: "", // 历史规整内容字符串
                correlationHTML: "", //历史联动内容字符串
                unfoldDomH: {},
                curFiles: null //当前选中历史记录的文件对象
            },
            arrowShow: false,
            listShow: false,
            lastType: "click", // 上次选择的绘图类型
            checkboxsGroup: {
                serial: false,
                inHeritAttr: false
            },
            filterBoxShow: false, //筛选框显示
            batchOperShow: false, //批次处理框显示
            lebalLebals: false, //选择属性框显示
            type: [
                {
                    cname: "物理属性1",
                    ename: "物理属性1"
                },
                {
                    cname: "物理属性2",
                    ename: "物理属性2"
                },
                {
                    cname: "物理属性3",
                    ename: "物理属性3"
                }
            ], // ['物理属性1','物理属性2','物理属性3'], // 标签
            checkType: {},
            drapSrlDom: null, // 拖拽区域中的拖拽d元素om
            promptShow: {
                shortcuts: false, // 快捷键
                standard: false, // 规范显示
                selFiles: 1
            },
            interactive: {
                screeningShow: false, // 是否显示筛选框
                screeningTag: [], // 需要筛选的属性
                saveSuccess: true, // 当前数据保存是否成功
                currentFinished: false // 当前图片是否加载完毕
            }, // 交互相关
            vm: {
                // 配置参数
                el: "drawing", // SVG 挂载点
                height: "100%", // SVG 渲染高度
                width: "100%", // SVG 渲染宽度
                type: "click", // 当前绘图的类型
                currentDrawData: {}, // 当前绘制图形的属性值
                currentId: 0, // 当前标注的文件序列 唯一不重复即可
                selectId: "", // 当前选中的 SVG 图像的id  主要为了获取当前选择的图形id
                list: [], // 图形数据 由于层级关系 需要用到
                isDisableRightKey: true, // 是否禁用右键
                zoom: 1, // 缩放比例
                maxZoom: 15, // 最大缩放比例
                minZoom: 0.02, // 最小缩放比例
                strokeWidth: 2, // 生成线的大小
                dragPointSize: 10, // 拖拽点的 大小
                rotateDeg: 1,
                textSize: 12, // 文本默认大小
                imgData: {
                    // 图片的基本信息
                    imgPath:
                        "http://ainote.iflytek.com/static/images/reg_bg.jpg", // http://127.0.0.1:8081/static/img/test.3036edb.jpg
                    width: 0,
                    height: 0,
                    x: 0,
                    y: 0
                },
                canChooseP: true, //是否开启选中多边形呢的折线
                svgHightLightClass: "svg-highlight", // 高亮的calss
                currentPolyLineId: "", // 当前折线的id
                clickCallBack: this.setClick, // 点击的回掉函数
                successCallBack: this.successCallBack, // 绘图结束后的回掉
                imgLoadCallBack: this.imgLoadCallBack, // svg img绘图成功后的回调
                changeCallBack: this.changeCallBack // 图形修改后的回调
            },
            refresh: 0, // 参考参数
            temItem: null, // 拖拽中间数据源
            successNum: 0, // 序列号
            preListsObj: null, // 保存上一个操作的list列表中图形信息对象 避免遍历
            selDrapClass: "",
            copeAttrCnt: "",
            showMark: false,
            showCheck: false,
            showTest: false,
            modifyTipsShow: false // 修改率浮层
        };
    },
    components: {
        Header,
        CenterControl
    },
    async created() {
        self = this;
        //获取taskId
        this.base.taskId = this.Utils.getQueryStringArgs()["taskId"];
        //markTaskId
        this.base.markTaskId = this.Utils.getQueryStringArgs()["markTaskId"];
        this.base.fileId = this.Utils.getQueryStringArgs()["fileid"];
        var params = {
            taskId: this.base.taskId,
            markTaskId: this.base.markTaskId,
            fileId: this.base.fileId
        };
        // return;
        let resultInfoPromise = await self.ass_api.getResultBySDK(params);
        resultInfoPromise.then(res => {
            if (!res) return;
            var step = res.step,
                result = {};
            if (!(step == 0 || step == 1 || step == 2)) {
                ass_api.error("页面类型异常");
                return;
            }
            self.allResult = res.result;
            self.base.markStandard = res.markStandard ? res.markStandard : "--";
            self.base.markName = res.fileName ? res.fileName : " -- ";
            // console.log('标注结果',res.data ,res.data.markStandard, res.data.taskName, step);

            if (step == 0) {
                $("title").text("精细化OCR结果");
            } else if (step == 1) {
                $("title").text("精细化OCR结果");
            } else if (step == 2) {
                $("title").text("精细化OCR结果");
            }
            if (step * 1 >= res.result.length) {
                step = res.result.length - 1;
            }
            step = res.result[step].step; // 针对没有检查环节 result返回length长度为2 step = 1 => 但没有检查环节
            self.initFiles(step);
        });

        // 快捷键
        this.shortcutKeyEvent();
    },
    mounted: function() {},
    computed: {
        showList: function() {
            // 展示的
            this.refreshList();
            // console.log('computedcomputedcomputedcomputed')
            // console.log(this.vm.list)
            var info = [],
                re = this.refresh;
            setRightList(this.vm.list, info);

            function setRightList(data, info) {
                data.forEach(function(data, index) {
                    if (data.children) {
                        info.push(data);
                        setRightList(data.children, info);
                    } else {
                        info.push(data);
                    }
                });
            }
            return info;
        },
        pageModifyRate: function() {
            // 页面要展示的修改率
            if (/^p-\d/g.test(this.vm.selectId)) {
                return true;
            } else {
                return false;
            }
        },
        sigRate: function() {
            if (this.showType == 0) {
                return this.vm.currentDrawData.markModifyRate;
            } else if (this.showType == 1) {
                return this.vm.currentDrawData.checkModifyRate;
            } else if (this.showType == 2) {
                return this.vm.currentDrawData.qualityModifyRate;
            }
        }
    },
    methods: {
        /**
         * 数据初始化
         * @param files
         * @param lastIndex
         */
        initFiles(step) {
            // 遍历循环全部数据

            var self = this;

            var indexId = "";
            this.allResult.forEach(function(item) {
                if (item.step == step) {
                    indexId = item.markTaskFileId;
                }
            });

            var files = this.allResult;
            var self = this;
            var len = files.length,
                curIndex = 0;
            this.showType = step;
            self.files.allInfo = [];

            for (var i = 0; i < len; i++) {
                if (files[i].step == 0) {
                    self.showMark = true;
                } else if (files[i].step == 1) {
                    self.showCheck = true;
                } else if (files[i].step == 2) {
                    self.showTest = true;
                }

                if (step == files[i].step) {
                    // console.log('step',step)
                    var item = files[i],
                        dInfo = {};
                    try {
                        // 标注默认结果
                        dInfo = JSON.parse(item.finalResult.resultText);
                        dInfo = dInfo;
                    } catch (e) {
                        dInfo = [];
                    }
                    // console.log('initFiles1233',dInfo);
                    if (isNotNull(item)) {
                        // 文件不为空 直接赋值到全部数据

                        var url = ass_api.getFileUrl({
                            // 针对检查抽检任务取标注markTaskId获取资源
                            key: "u-" + newMarkTaskId + "-" + indexId,
                            sid: fn.getCookie("sid")
                        });

                        self.files.allInfo.push({
                            result: this.flatToTreeData(dInfo), // 把扁平数据树结构化 供前端逻辑使用
                            isBad: item.finalResult.extend.stamp,
                            name: item.name,
                            id: indexId,
                            status: item.status,
                            url: url, // 图片url
                            isInit: 0, // 表示尚未从结果服务获取数据
                            saveSuccess: true
                        });
                        self.files.allImage.push(url); // 所有的图片
                        curIndex = 0;
                    }
                }
            }

            self.selectData(step); // 选择数据
        },

        hideHeader(showType) {
            this.arrowShow = showType;
        },
        shortcutKeyEvent() {
            document.onkeydown = function(e) {
                // keydown事件
                // if(self.operate.isKeydownPrepare === false) return;
                var e = e || window.event,
                    code = e.keyCode || e.which || e.charCode;
                var code = e.keyCode || e.which || e.charCode;
                var type = e.srcElement ? e.srcElement.type : e.target.type; // 看当前所处环境
                var ableToDo = true; // 用来区分是否可以使用快捷键
                var upDown = true; // 是否可以 上下 切换 2018/9/28
                if (type === "text" || type === "textarea") {
                    // 如果在文本框中
                    ableToDo = false;
                }

                if (type === "textarea") {
                    // 如果在 textarea 中 2018/9/28
                    upDown = false;
                }

                shortKeyIfTrue(
                    code == 32 && ableToDo,
                    function() {
                        // 拖拽 115 code == 32
                        self.sendclickType(6);
                    },
                    e
                );

                shortKeyIfTrue(
                    code == 13 && ableToDo,
                    function() {
                        // 快速编辑 选中 + Enter
                        self.quickEditFn();
                    },
                    e
                );
            };

            document.onkeyup = function(e) {
                // keyup事件
                var e = e || window.event,
                    code = e.keyCode || e.which || e.charCode;
                var type = e.srcElement ? e.srcElement.type : e.target.type; // 看当前所处环境
                var ableToDo = true; // 用来区分是否可以使用快捷键
                if (type === "text" || type === "textarea") {
                    // 如果在文本框中
                    ableToDo = false;
                }

                // 空格
                shortKeyIfTrue(
                    code == 32 && ableToDo,
                    function() {
                        // 拖拽 115 code == 32
                        self.sendclickType("click");
                    },
                    e
                );
            };
        },
        // 折线排序 根据父级多边形id
        setLine: function(id) {
            var info = [],
                allLine = [];
            getLine(this.vm.list, info);

            function getLine(data, info) {
                data.forEach(function(item, index) {
                    if (item.children && item.children.length > 0) {
                        if (item.pId === id) {
                            allLine.push(item);
                        }
                        getLine(item.children, info);
                    } else {
                        if (item.pId === id) {
                            allLine.push(item);
                        }
                    }
                });
            }
            return this.sortLine(allLine);
        },
        sortLine: function(allLine) {
            var compareArr = [],
                first = [];
            for (var i = 0, len = allLine.length; i < len; i++) {
                if (allLine[i].region === "polyline") {
                    allLine[i].points = self.polygonToNeed(allLine[i].points);
                    compareArr.push([allLine[i].points[0][1], allLine[i].id]); // 获取第一个点的Y
                }
            }
            first = compareArr.sort(sortByY);

            function sortByY(f, s) {
                return f[0] - s[0];
            }

            this.setSignByLine(allLine, first);
        },
        setSignByLine: function(allLine, first) {
            for (var i = 0; i < allLine.length; i++) {
                if (allLine[i].id === (first[0] && first[0][1])) {
                    allLine[i].isFrist = true;
                } else {
                    allLine[i].isFrist = false;
                }
            }
        },
        /**
         * 文本的显示和隐藏
         */
        showTextContent: function() {
            var type = this.checkboxsGroup.serial;
            if (type) {
                self.changeText(this.vm.list);
            } else {
                svg.showText(false);
            }
            // console.log(this.vm.list);
        },
        /**
         * 展示文本
         */
        changeText: function(data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].children && data[i].children.length > 0) {
                    self.changeText(data[i].children);
                    if (!data[i].isFrist) {
                        svg.showText(true, data[i].id, data[i].alias);
                    }
                } else {
                    // console.log(data[i].id, data[i].alias, 333)
                    if (!data[i].isFrist) {
                        svg.showText(true, data[i].id, data[i].alias);
                    }
                }
            }
        },
        /**
         * 阻止默认事件
         * @param event
         */
        addHoverClass(event, item, l) {
            var event = event || window.event;
            if (event.preventDefault) {
                event.preventDefault();
            }
            var pAliasLen = this.temItem.alias.split("-").length;
            if (item.alias.slice(0, pAliasLen) === this.temItem.alias) return; // 父元素不能往子元素拖
            this.selDrapClass = item.id + l;
        },
        /**
         * 拖拽开始
         * @param item
         */
        dragStart: function(e, item) {
            $(e.target).css({
                visibility: "hidden"
            });
            this.temItem = item; // 获取当前获取元素的引用
        },
        dragend: function(e) {
            $(e.target).css({
                visibility: "visible"
            });
            this.selDrapClass = "";
        },
        /**
         * 移动到上部分
         * @param item
         * @returns {boolean}
         */
        changeOrder2: function(item, type) {
            // 改变当前引用在对象中的位置
            // this.selDrapClass = '';
            if (this.temItem) {
                // 确保存在有效的被拖拽元素
                if (!item.alias || item.alias == 0) {
                    item.alias = "";
                }
                // console.log(type);
                // 父元素不能被拖到子元素中
                if (item.alias.indexOf(this.temItem.alias) === 0) {
                    return false;
                }
                // 折线同级拖拽 源和目标的父层级值必须相同 只能在同父曲线区域内进行拖拽
                if (
                    this.temItem.region == "polyline" &&
                    (!item.parent ||
                        item.parent.alias != this.temItem.parent.alias)
                ) {
                    ui.fade("折线只允许在当前父曲线范围中进行拖拽！");
                    return false;
                }
                // 改变当前对象的数据结构
                this.deleteItem(this.temItem); // 删除源
                var targetList = !item.parent
                    ? this.vm.list
                    : item.parent.children; // 获取目标引用所在的位置

                var inId = this.getItemIndex(targetList, item);
                if (inId != null) {
                    targetList.splice(
                        type === "down" ? inId + 1 : inId,
                        0,
                        this.temItem
                    );
                }
                // this.refreshList();

                this.refresh++;
            }
        },
        // 拖拽经过
        dragleave: function(e, item, l) {
            // this.selDrapClass = '';
        },
        /**
         * 数组移除操作
         * @param item
         */
        deleteItem: function(item) {
            // 删除操作
            var tarList2 = !item.parent ? this.vm.list : item.parent.children;
            var rmId = this.getItemIndex(tarList2, item);
            if (rmId != null) {
                tarList2.splice(rmId, 1);
            }
        },
        /**
         * 获取元素位置
         * @param _list
         * @param _item
         * @returns {*}
         */
        getItemIndex: function(_list, _item) {
            var tmIndex = 0;
            for (var i = 0, len = _list.length; i < len; i++) {
                if (_list[i].id == _item.id) {
                    tmIndex = i;
                    break;
                }
            }
            return tmIndex;
        },
        /**
         * 移动到下部分
         * @param item
         * @returns {boolean}
         */
        pushChildren: function(item) {
            this.selDrapClass = "";
            if (this.temItem) {
                if (!item.alias || item.alias == 0) {
                    item.alias = "";
                }
                // 最多4层
                if (item.alias.length > 6) {
                    ui.fade("最多嵌套四层！");
                    return;
                }

                // 父级与祖宗元素不能拖到子集元素中
                if (item.alias.indexOf(this.temItem.alias) === 0) {
                    // console.log('父元素不能往子元素拖拽')
                    return false;
                }
                // 折线不能进行嵌套
                if (this.temItem.region == "polyline") {
                    ui.fade("折线只能同级拖拽，不允许嵌套！");
                    return false;
                }
                if (this.temItem.region != "polyline") {
                    var children = item.children;
                    if (children && children[0]) {
                        for (var i = 0; i < children.length; i++) {
                            if (children[i].region == "polyline") {
                                ui.fade(
                                    "多边形区域内存在折线，不允许嵌套矩形或多边形！"
                                );
                                return;
                            }
                        }
                    }
                }
                if (!item.children) {
                    // 如果没有children 复制一份
                    item.children = [];
                }
                this.deleteItem(this.temItem);
                item.children.push(this.temItem);

                this.refresh++;
                // this.refreshList();
                // console.log(this.vm.list)
            }
        },
        /**
         * 数据渲染
         */
        refreshList: function() {
            for (var i = 0, len = this.vm.list.length; i < len; i++) {
                var item = this.vm.list[i];
                if (item.unfold) {
                    // 右侧list列表 是否展开
                    Vue.set(item, "unfold", true);
                } else {
                    Vue.set(item, "unfold", false);
                }
                if (item.type === undefined) {
                    Vue.set(item, "type", "");
                }
                // 设置cid 与 别名
                item.cid = i + 1;
                if (!item.isFrist) {
                    item.alias = item.alias = i + 1 + "";
                } else {
                    item.alias = "";
                }
                item.parent = null;
                handleChildrenItem(item, item.alias);
            }

            this.successNum = i + 1;
            // this.refresh ++;
            function handleChildrenItem(item, p_alias) {
                var firstId = null; // 每次调用应该是重置
                if (item && item.children && item.children.length != 0) {
                    for (var i = 0, len = item.children.length; i < len; i++) {
                        var c = item.children[i];
                        if (c.unfold) {
                            // 右侧list列表 是否展开
                            Vue.set(c, "unfold", true);
                        } else {
                            Vue.set(c, "unfold", false);
                        }
                        if (c.type === undefined) {
                            Vue.set(c, "type", "");
                        }
                        c.cid = i + 1;
                        c.alias = p_alias + "-" + c.cid;
                        if (i + 1 > firstId && firstId !== null) {
                            c.cid = i;
                        } else {
                            c.cid = i + 1;
                        }

                        if (!c.isFrist) {
                            c.alias = p_alias + "-" + c.cid;
                        } else {
                            c.alias = "";
                            firstId = i + 1;
                        }

                        // 设置父元素
                        c.parent = item;
                        handleChildrenItem(c, c.alias, firstId);
                    }
                }
            }
        },
        /**
         *  图片绘制成功后的回调
         * @param domObject 绘制成功后的图形对象 rect polygon po
         */
        successCallBack: function(domObject) {
            var id = domObject.id(); // 获取对象id
            // console.log(domObject)
            if (this.checkboxsGroup.inHeritAttr && !!this.copeAttrCnt) {
                $(domObject.node).attr("type", this.copeAttrCnt);
            }
            svg.initCursor(); // 初始化光标
            self.setDrawData(domObject, "add"); // 数据处理
            self.setClick(id); // 相当于重新触发一次点击事件
            this.vm.type = "click"; // 初始化绘制类型
            this.lastType = "click"; // 初始化上次绘制类型
            if (/^pl-\d+/g.test(id)) {
                this.setLine(domObject.data("parent"), this.vm.list);
            }
        },
        /**
         * 点击后的回调函数  新增
         * @param id
         */
        setClick: function(id) {
            // 点击事件
            if (this.vm.selectId != id) {
                this.globalCloseUnfold();
            }
            this.vm.selectId = id;
            svg.createDragPoint(id); // 图形被聚焦
            // console.log(id)
            // console.log(this.vm.list)
            var vmList = this.showList;
            for (var i = 0; i < vmList.length; i++) {
                if (vmList[i].id == id) {
                    Vue.set(this.vm, "currentDrawData", vmList[i]); // 当前选择图形的信息对象
                    break;
                }
            }
            svg.createDragPoint(id);
            svg.addHightlight(id);
            var currentArea = this.vm.currentDrawData;
            // 变色
            $(".adjust-size").each(function(ind, item) {
                var cx = $(item).attr("cx"),
                    cy = $(item).attr("cy");
                $(item).css({
                    fill: "rgb(0, 162, 255)"
                });
                $(item).attr("point-type", ""); // dom上添加标记
                if (currentArea.startPoint) {
                    // console.log(currentArea.startPoint[0] * 1 ,'-------------------------', cx * 1)
                    // console.log(currentArea.startPoint[1] * 1 ,'-------------------------', cy * 1)
                }
                if (
                    currentArea.startPoint &&
                    KeepEight(currentArea.startPoint[0]) === KeepEight(cx) &&
                    KeepEight(currentArea.startPoint[1]) === KeepEight(cy)
                ) {
                    $(item).css({
                        fill: "red"
                    });
                    $(item).attr("point-type", "startPoint"); // dom上添加标记
                    Vue.set(
                        self.vm.currentDrawData,
                        "startPointInd",
                        $(item).attr("data-point-index")
                    );
                }
                if (
                    currentArea.endPoint &&
                    KeepEight(currentArea.endPoint[0]) === KeepEight(cx) &&
                    KeepEight(currentArea.endPoint[1]) === KeepEight(cy)
                ) {
                    $(item).css({
                        fill: "green"
                    });
                    $(item).attr("point-type", "endPoint"); // dom上添加标记
                    Vue.set(
                        self.vm.currentDrawData,
                        "endPointInd",
                        $(item).attr("data-point-index")
                    );
                }
            });
            if (/^pl-\d+/g.test(id)) {
                SVG.get(id).addClass("no-fill");
                id = SVG.get(id).data("parent");
            }
            // 多边形事件绑定与销毁
            if (/^p-\d+/g.test(id)) {
                self.polygonBindEvent(id);
            }
        },
        // 多边形事件的销毁与绑定 新增
        polygonBindEvent: function(id) {
            id = id + "-group";
            var domElement = SVG.get(id);
            domElement.off("mousemove");
            domElement.off("mouseleave");
            // domElement.on('mousemove', function () {
            //     svg.bindPolygon('mousemove');
            // })
            // domElement.on('mouseleave', function () {
            //     svg.bindPolygon('mouseleave');
            // })
        },
        // 数据设置  domObject 图形对象 handleType 处理方式  新增
        setDrawData: function(domObject, handleType) {
            var id = domObject.id(),
                type = domObject.type,
                data = {};
            var attrType = $(domObject.node).attr("type"); // 获取继承的属性 只有开启继承 初始绘制完成才有默认属性
            if (type === "rect") {
                data = {
                    id: id,
                    region: "rect",
                    w: domObject.width(),
                    h: domObject.height(),
                    x: domObject.x(),
                    y: domObject.y(),
                    dom: domObject.node,
                    text: "",
                    alias: this.successNum + "",
                    type: attrType === undefined ? "" : attrType
                };
            } else if (type === "polygon") {
                data = {
                    id: domObject.id(),
                    text: "",
                    region: "area",
                    points: domObject.attr("points"),
                    dom: domObject.node,
                    type: attrType === undefined ? "" : attrType
                };
            } else if (type === "polyline") {
                // 折线不需要添加属性
                data = {
                    id: domObject.id(),
                    text: "",
                    region: "polyline",
                    pId: domObject.data("parent"),
                    points: domObject.attr("points"),
                    dom: domObject.node
                };
            }

            if (handleType === "add" && type !== "polyline") {
                this.vm.list.push(data);
            } else if (handleType === "change") {
                this.findDataFromArr(domObject.id(), this.vm.list, 1, data);
            } else if (handleType === "add" && type === "polyline") {
                this.findDataFromArr(
                    domObject.data("parent"),
                    this.vm.list,
                    2,
                    data
                );
            }
            this.synchToFile();
            // console.log(this.vm.list,this.files.current,this.files.allInfo,this.files.showList);
        },
        // 图形修改后的回调  新增
        changeCallBack: function(domObject) {
            var id = domObject.id();
            // console.log(domObject)
            self.setDrawData(domObject, "change");
        },
        // 从数组中查找数据 id 当前数据的id  data 目标源数据 isChange (1)是否修改 (2)是否添加为子元素  info 新数据  新增
        findDataFromArr: function(id, data, isChange, info) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].children && data[i].children.length > 0) {
                    if (data[i].id === id) {
                        if (isChange === 1) {
                            if (data[i].type === "rect") {
                                data[i].w = info.w;
                                data[i].h = info.h;
                                data[i].x = info.x;
                                data[i].y = info.y;
                            } else {
                                data[i].points = info.points;
                            }
                        }
                        if (isChange === 2) {
                            // Vue.set(data[i], 'children', data[i].children || [])
                            data[i].children = data[i].children || [];
                            data[i].children.push(info);
                        }
                        return data[i];
                    }
                    this.findDataFromArr(id, data[i].children, isChange, info);
                } else {
                    if (data[i].id === id) {
                        if (isChange === 1) {
                            // console.log("移动")
                            if (data[i].type === "rect") {
                                data[i].w = info.w;
                                data[i].h = info.h;
                                data[i].x = info.x;
                                data[i].y = info.y;
                            } else {
                                data[i].points = info.points;
                            }
                        }
                        if (isChange === 2) {
                            // Vue.set(data[i], 'children', data[i].children || [])
                            data[i].children = data[i].children || [];
                            data[i].children.push(info);
                        }
                        return data[i];
                    }
                }
            }
        },
        globalCloseUnfold: function() {
            this.lebalLebals = false;
            this.preListsObj ? (this.preListsObj.unfold = false) : "";
        },
        // 快速编辑
        quickEditFn: function() {
            var id = this.vm.selectId;
            if (!id) return;
            var list = this.showList,
                ind = -1;
            for (var i = 0; i < list.length; i++) {
                if (list[i].id == id) {
                    this.selAttrFn("", i, list[i]);
                    ind = i;
                    break;
                }
            }
        },

        //  数据同步  新增
        synchToFile: function(id) {
            var list = Object.assign([], [], this.vm.list);
            if (id) {
                this.files.current.result[id] = Object.assign(
                    this.files.current.result[id]
                        ? this.files.current.result[id]
                        : [],
                    this.vm.list[id]
                );
            }
            // this.files.current.result = Object.assign([] ,[], this.vm.list);
            Vue.set(this.files.current, "result", list);
            this.vm.list = this.files.current.result;
        },
        /**
         * 图片预加载
         * @param img 图片地址
         */
        preLoading: function(img) {
            if (!img) {
                return false;
            }
            var oImg = new Image(),
                url = "";
            oImg.src = img;
            if (oImg.complete) {
                url = self.files.allImage.shift();
                //如果图片已经存在于浏览器缓存,直接调用回调函数
                self.preLoading(url);
            } else {
                oImg.onload = function() {
                    // console.log('加载了一次');
                    url = self.files.allImage.shift();
                    //如果图片已经存在于浏览器缓存,直接调用回调函数
                    self.preLoading(url);
                };
            }
        },
        // 选择属性
        selectTag: function(ename, cname) {
            var id = this.vm.selectId; // 当前选中的id;
            this.copeAttrCnt = ename; // 继承属性 保留最后一次选择的属性值
            if (this.history.showVersionInfo) {
                // 查看历史时 不能修改
                return false;
            }
            if (id === "" || id === "defaultGroup") {
                return false;
            }
            if (this.vm.currentDrawData.type === ename) {
                // 如果上一次的 标签和 这一次的标签相同 则取消 2018/9/29
                Vue.set(this.vm.currentDrawData, "type", "");
            } else {
                // 否则给当前的属性 2018/9/29
                Vue.set(this.vm.currentDrawData, "type", ename);
            }

            $(this.vm.currentDrawData.dom).attr(
                "type",
                this.vm.currentDrawData.type
            ); // 在dom存type 用直接取 避免遍历
            // console.log(this.files.current)
            this.vm.preMarkInfo = ""; // name 设置一个默认前者的 标签 暂时的需求是 不需要继承 上一次的属性了 2018/9/29
            // this.synchCurrentData('type',name)
        },
        // 增加筛选条件 (有的话 去掉,没有添加)
        changeScreening: function(ename, cname) {
            var exist = this.interactive.screeningTag.indexOf(ename);
            if (exist === -1) {
                this.interactive.screeningTag.push(ename);
                // Vue.set(this.interactive.screeningTag, this.interactive.screeningTag.length, item)
            } else {
                this.interactive.screeningTag.splice(exist, 1);
            }
            self.showPaintboxByTag(this.interactive.screeningTag);
        },
        // 筛选框关闭
        changeScreeningCls: function() {
            this.filterBoxShow = false;
            Vue.set(this.interactive, "screeningTag", []);
            this.showPaintboxByTag(this.interactive.screeningTag);
        },
        // 根据属性 展示 绘图框
        showPaintboxByTag: function(tags) {
            var doms = SVG.select(".area-box");
            var point = SVG.select(".adjust-size").members[0]; // 拖拽点
            var pointParent = ""; // 拖拽点 所属 父亲
            if (point) {
                pointParent = SVG.select(".adjust-size").members[0].data(
                    "parent"
                );
            }
            doms.each(function() {
                var id = this.attr("id");
                var type = this.attr("type");
                if (tags.length === 0) {
                    // 没有标签 默认全部展示
                    this.show();
                } else {
                    if (tags.indexOf(type + "") == -1) {
                        // 如果没有这个标签 隐藏
                        this.hide();
                        if (id === pointParent) {
                            // 如果当前元素 隐藏 是其点也相对隐藏
                            self.hidePoint(true);
                        }
                    } else {
                        // 否则展示
                        this.show();
                        if (id === pointParent) {
                            // 如果当前元素 隐藏 是其点也相对隐藏
                            self.hidePoint(false);
                        }
                    }
                }
            });
        },
        // 隐藏点
        hidePoint: function(isHide) {
            var adjustSize = SVG.select(".adjust-size");
            adjustSize.each(function() {
                if (isHide) {
                    this.hide();
                } else {
                    this.show();
                }
            });
        },
        // 拖拽区域滚动事件
        scroll: function(e) {
            var outBoxH = $(".content_right_two").height();
            var targetH = $(this.$refs["lebals"]).height();
            var topVal = !this.arrowShow ? 100 : 50;
            if (!this.drapSrlDom) return; // 没有选中拖拽目标
            var eTop = this.drapSrlDom.getBoundingClientRect().top;
            if (targetH + eTop - topVal > outBoxH) {
                $(this.$refs["lebals"]).css({
                    bottom: "30px",
                    top: "auto"
                });
            } else if (eTop - topVal < 0) {
                $(this.$refs["lebals"]).css({
                    bottom: "auto",
                    top: "2px"
                });
            } else {
                $(this.$refs["lebals"]).css({
                    bottom: "auto",
                    top: eTop - topVal + "px"
                });
            }
        },
        // 选择属性
        selAttrFn: function(e, ind, item) {
            this.vm.type = "click";
            Vue.set(this.vm, "currentDrawData", item); // 当前选择图形的信息对象

            if (!item.unfold) {
                this.preListsObj ? (this.preListsObj.unfold = false) : "";
                this.preListsObj = item;
            }
            // console.log(this.vm.list)
            this.$nextTick(function() {
                var outBoxH = $(".content_right_two").height();
                this.drapSrlDom = this.$refs["srl" + ind][0];
                var targetH = $(this.$refs["srl" + ind][0]).height();
                // console.log($(this.$refs['srl'+ind][0]).height())
                var topVal = !this.arrowShow ? 100 : 50;
                var eTop = this.drapSrlDom.getBoundingClientRect().top;
                if (targetH + eTop - topVal > outBoxH) {
                    $(this.$refs["lebals"]).css({
                        bottom: "30px",
                        top: "auto"
                    });
                } else {
                    $(this.$refs["lebals"]).css({
                        bottom: "auto",
                        top: eTop - topVal + "px"
                    });
                }
                item.unfold = !item.unfold;
                if (item.region == "polyline") {
                    this.lebalLebals = false;
                } else {
                    this.lebalLebals = item.unfold;
                }
            });
            this.setClick(item.id);
            if (!this.history.showVersionInfo) {
                // 查看历史时，不能修改
                // this.controllShow(item.id, 0)
            }
        },
        // 删除选中的图形
        delectSelectBox: function() {
            var _Vue = this;
            if (this.history.showVersionInfo) {
                // 如果查看历史不准删除
                _Vue.ableKey = true;
                return false;
            }
            var id = this.vm.selectId; // 当前选中的矩形
            var status = false;
            if (id === "defaultGroup" || !id) {
                // 如果当前id不是绘图框
                ui.fade("当前尚未选择图形");
                _Vue.ableKey = true;
                /*setTimeout(function () {
                            _Vue.ableKey = true;
                        },1000);*/
            } else {
                ui.confirm(
                    "是否删除当前选中的图形",
                    function() {
                        // 删除当前元素
                        try {
                            // delete _Vue.vm.list[id]; // 删除
                            var list = _Vue.vm.list;
                            delListItem(list);
                            // 递归删除图形
                            function delListItem(list) {
                                for (var i = 0; i < list.length; i++) {
                                    if (list[i].id == id) {
                                        list.splice(i, 1);
                                        self.refresh++;
                                        return false;
                                    }
                                    // console.log(list)
                                    if (
                                        list[i].children &&
                                        list[i].children[0]
                                    ) {
                                        var children = list[i].children;
                                        if (delListItem(children) === false)
                                            return false;
                                    }
                                }
                            }

                            // Vue.set(_Vue.vm, 'list', list);
                            // delete _Vue.files.current.result[id]; // 删除
                            // console.log(_Vue.files.current)
                            // _Vue.vm.currentDrawData = Object.assign({},{}); // 监听 vue 没有监听到
                            svg.clearDrawPoint(); // 清空 拖拽点
                            SVG.get(id).remove(); // 清空图形
                            SVG.get(id + "-text").remove(); // 删除文字
                            SVG.get(id + "-group")
                                ? SVG.get(id + "-group").remove()
                                : ""; // 清空父容器 折线么有group
                            _Vue.vm.selectId = ""; // 删除过后 应该将当前选中的id 清空
                            _Vue.ableKey = true;
                            Vue.set(_Vue.vm, "currentDrawData", {});
                        } catch (e) {
                            // console.log(e)
                            ui.fade("当前尚未选择图形");
                            _Vue.ableKey = true;
                        }
                    },
                    function() {
                        _Vue.ableKey = true;
                    }
                );
            }
        },
        // 绘图按钮 type: number 1 矩形 2 多边形 3 折线 （需要选中多边形）4 筛选 5 未知  6 拖拽
        sendclickType: function(type) {
            var drawType = "click";
            var dataType = typeof type;
            this.vm.type = drawType;
            if (dataType === "number") {
                if (type === 1) {
                    drawType = "rect";
                } else if (type === 2) {
                    drawType = "polygon";
                } else if (type === 3) {
                    if (!/^p-\d+/g.test(this.vm.selectId)) {
                        ui.fade("请选择多边形");
                        return;
                    } else {
                        // 多边形内有嵌套非折线图形 不允许再绘制折线
                        var currentDrawDataCld = this.vm.currentDrawData
                            .children;
                        if (currentDrawDataCld && currentDrawDataCld[0]) {
                            for (
                                var i = 0;
                                i < currentDrawDataCld.length;
                                i++
                            ) {
                                if (
                                    currentDrawDataCld[i].region != "polyline"
                                ) {
                                    ui.fade(
                                        "当前多边形内嵌套了矩形或多边形，不允许绘制折线！"
                                    );
                                    return;
                                }
                            }
                        }
                    }
                    drawType = "polyline";
                } else if (type === 4) {
                    this.batchProcess(); // 批量处理
                    this.batchOperShow = true;
                } else if (type === 6) {
                    // 拖拽
                    drawType = "drag";
                }
            } else if (dataType === "string") {
                // 字符串 直接赋值
                if (type === "polyline") {
                    if (!/^p-\d+/g.test(this.vm.selectId)) {
                        ui.fade("请选择多边形");
                        return;
                    }
                }
                drawType = type;
            }

            if (drawType !== "drag") {
                // 如果不是拖拽 就记录
                this.lastType = drawType;
            }

            this.vm.type = drawType;
        },
        // 初始化后套返回扁平数据转换树状结构
        flatToTreeData: function(lists) {
            var tempMap = {};
            for (var i = 0, len = lists.length; i < len; i++) {
                var item = lists[i];
                item.parent = null;
                item.children = [];
                tempMap[item.id] = item;
            }
            var newArr = [];
            for (var i = 0, len = lists.length; i < len; i++) {
                var item = lists[i];
                if (item.pId != -1 && item.pId) {
                    var parent = tempMap[item.pId];
                    parent.children.push(item);
                } else {
                    newArr.push(item);
                }
            }

            return newArr;
        },
        // 修改当前绘制状态(同时隐藏十字光标)
        changeType: function(type) {
            // 先做一次校验 , 查看历史不能切换 绘图状态
            if (
                this.history.showVersionInfo &&
                (type === "rect" || type === "polygon")
            ) {
                return false;
            }
            this.vm.type = type;

            if (type !== "drag") {
                // 如果不是拖拽 就记录
                this.lastType = type;
            }
            if (type === "drag") {
                svg.initCursor(); // 初始化光标
            }
        },
        showHistory: function() {
            var self = this;
            this.history.list = [];
            var fileId = this.curFiles.id;
            ass_api.getCurrentResult(
                {
                    taskId: taskId,
                    markTaskId: markTaskId,
                    markTaskFileId: fileId,
                    qtype: "history"
                },
                function(info) {
                    var len = info.history.length;
                    for (var i = 0; i < len; i++) {
                        self.history.list.push(info.history[i]);
                    }
                }
            );
            self.history.show = true;
        },
        getSelectClass: function(_type) {
            if (_type == this.files.showType) {
                return "selected";
            }
        },
        getClickClass: function(_type) {
            if (this.files.clickType == 1) {
                return "clickone";
            } else if (this.files.clickType == 2) {
                return "clicktwo";
            } else if (this.files.clickType == 3) {
                return "clickthree";
            } else if (this.files.clickType == 4) {
                return "clickfour";
            } else if (this.files.clickType == 5) {
                return "clickfive";
            }
        },
        /**
         *  选择区域数据
         * @param _type
         * @param lastIndex
         */
        selectData: function(step) {
            // 选择对应的数据

            if (!self.interactive.currentFinished && step != step) {
                // 切换需要做限制
                ui.fade("当前图片尚未加载完毕");
                return false;
            }

            if (isNaN(Number(step))) {
                // 如果 lastIndex 无非转换成数字 默认0
                lastIndex = 0;
            }

            self.files.showType = step;
            var len = self.files.allInfo.length,
                showList = [];

            // if (_type === 1) { // 全部数据
            showList = self.files.allInfo;
            // }

            // var len2 = showList.length;
            // for (var i = 0; i < len2; i++) {
            //     var file = showList[i];
            //     file.last = i == 0 ? null : showList[i - 1];
            //     file.next = i == len - 1 ? null : showList[i + 1];
            // }

            self.files.showList = showList; // 给当前列表赋值
            self.selectFile(self.files.showList[0]);

            // console.log('showList',self.files.showList);
        },
        /**
         * 选择单个文件
         * @param item 当前条的数据
         */
        selectFile: function(item) {
            // console.log(item,999999999999999)
            if (isNull(item)) return false; // 如果空 返回

            self.initAboutImgData(true); // 初始化所有和图片相关的信息
            self.vm.imgData.imgPath = item.url;
            self.files.curIndex = item.id;
            // // 这里先赋值 数据
            Vue.set(self.files, "current", item);
            // // console.log(item)
            self.initFile(item);
        },
        /**
         * 初始化单个文件
         * @param item
         */
        initFile: function(item) {
            // 判断是否获取最新结果 并初当前加载参数
            self.interactive.currentFinished = false; // 初始化
            self.interactive.screeningTag = []; // 初始化选中标签
            self.interactive.screeningShow = false; // 默认不展示
            svg = new OcrPublicClass(this.$data.vm); // 实例化图形
        },
        /**
         * 从结果服务中获取是否存在新的结果
         * @param file
         */
        getCurResult: function(file) {
            if (file.isInit === 1) return false; // 如果文件 isInit为 1 说明页面刷新后已经从结果拉去过一次
            // 表示需要获取最新的标注数据
            ass_api.getCurrentResult(
                {
                    taskId: taskId,
                    markTaskId: markTaskId,
                    markTaskFileId: file.id,
                    qtype: "new"
                },
                function(info) {
                    var curInfo = JSON.parse(info.resultText);
                    file.result = curInfo;
                    file.isBad = info.stamp;
                    file.isInit = 1;
                    file.lastSubmit = {
                        result: "", // JSON.stringify(self.arrToObject(file.result, false)),
                        isLastAuto: info.isAutoSave == 1
                    };
                }
            );
        },
        /**
         * 跳转到某一条数据
         * @param item 数据
         * @param force 是否强制跳转 ，如果true 则可以跳到未标注的数据上
         * @returns {boolean}
         */
        skipFile: function(item, force) {
            // console.log('adsaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd')
            // console.log(item)
            // if (item.status === 0 && !force) {
            //     ui.fade('不能跳转到未标注数据');
            //     return false;
            // }
            if (item.id !== self.files.curIndex) {
                self.selectFile(item);
            }
        },
        /**
         * 图片加载成功后的回调  新增
         */
        imgLoadCallBack: function() {
            // 这里关联了 current 和 list
            self.interactive.currentFinished = true; // 图形加载完毕
            self.dataConversion(self.files.current.result, true, true); // 这个current.result 可以是开始给的数组 也可能是标注过程中使用的对象;
            // 事件销毁
            svg.destroyEvents("mousemove");
            // 绑定拖动事件
            svg.bindEvents("mousemove", self.customDrag, 1); // 自定义拖动事件

            // 初始化不显示第一条折线
            var resultArr = self.files.current.result;

            self.firstLineInit(resultArr);
            // resultArr.forEach(function (item) {
            //     if (item.region == "area" && item.children && item.children[0] && item.children.some(function (item) {
            //         return item.region == 'polyline'
            //     })) {
            //         self.setLine(item.id, resultArr)
            //     }
            // })
        },
        firstLineInit: function(data) {
            if (Object.prototype.toString.call(data) === "[object Array]") {
                for (var i = 0; i < data.length; i++) {
                    if (
                        data[i].region === "area" &&
                        data[i].children &&
                        data[i].children[0]
                    ) {
                        self.setLine(data[i].id, data);
                    }
                    if (data[i].children && data[i].children[0]) {
                        self.firstLineInit(data[i].children);
                    }
                }
            }
        },
        /**
         * 初始化和图片相关的参数
         * ①销毁svg实例 ②初始化相关参数 destroy 为true 代表全部销毁 false 代表只初始化参数
         */
        initAboutImgData: function(destroy) {
            if (destroy) {
                svg = null; // 销毁svg实例 并且将整个svg 销毁
                try {
                    SVG.get("#_drawing").remove();
                } catch (e) {}
            }
            this.vm = {
                // SVG 绘图相关的属性
                el: "drawing", // SVG 挂载点
                height: "100%", // SVG 渲染高度
                width: "100%", // SVG 渲染宽度
                type: "click", // 当前绘图的类型
                currentDrawData: {}, // 当前绘制图形的属性值
                currentId: 0, // 当前标注的文件序列 唯一不重复即可
                selectId: "", // 当前选中的 SVG 图像的id  主要为了获取当前选择的图形id
                maxId: 0, //当前图形中最大的Id
                list: [], // 图形数据 由于层级关系 需要用到
                isDisableRightKey: true, // 是否禁用右键
                zoom: 1, // 缩放比例
                maxZoom: 15, // 最大缩放比例
                minZoom: 0.02, // 最小缩放比例
                strokeWidth: 2, // 生成线的大小
                dragPointSize: 10, // 拖拽点的 大小
                rotateDeg: 1,
                textSize: 12, // 文本默认大小
                imgData: {
                    // 图片的基本信息
                    imgPath:
                        "http://ainote.iflytek.com/static/images/reg_bg.jpg", // http://127.0.0.1:8081/static/img/test.3036edb.jpg
                    width: 0,
                    height: 0,
                    x: 0,
                    y: 0
                },
                canChooseP: true, //是否开启选中多边形呢的折线
                svgHightLightClass: "svg-highlight", // 高亮的calss
                currentPolyLineId: "", // 当前折线的id
                clickCallBack: this.setClick, // 点击的回掉函数
                successCallBack: this.successCallBack, // 绘图结束后的回掉
                imgLoadCallBack: this.imgLoadCallBack, // svg img绘图成功后的回调
                changeCallBack: this.changeCallBack // 图形修改后的回调
            };
        },
        // 数据转换  新增  isFirst 是否是第一层层
        dataConversion: function(list, isDraw, isFirst) {
            // console.log(list,999999999);
            var data = [],
                maxId = 0,
                numId = "";
            // console.log('图片回到成功！')
            var type = Object.prototype.toString.call(list);
            if (type === "[object Array]") {
                for (var i = 0; i < list.length; i++) {
                    var region = list[i].region; // 图形类型
                    var id = list[i].id; // 当前图形的id
                    var pId = list[i].pId; // 当前图形的pId
                    if (region === "rect") {
                        list[i].id =
                            typeof id === "number"
                                ? "r-" + id
                                : id.indexOf("r-") === -1 ? "r-" + id : id; // 取最大的数
                    } else if (region === "area") {
                        list[i].id =
                            typeof id === "number"
                                ? "p-" + id
                                : id.indexOf("p-") === -1 ? "p-" + id : id; // 取最大的数
                        list[i].points = this.polygonToNeed(list[i].points); // 多边形 point s 转换
                    } else if (region === "polyline") {
                        list[i].id =
                            typeof id === "number"
                                ? "pl-" + id
                                : id.indexOf("pl-") === -1 ? "pl-" + id : id; // 取最大的数
                        list[i].points = this.polygonToNeed(list[i].points); // 多边形 point s 转换
                        list[i].pId =
                            typeof pId === "number"
                                ? "p-" + pId
                                : pId.indexOf("p-") === -1 ? "p-" + pId : pId; // 取最大的数
                    }

                    if (typeof id !== "number") {
                        // id 不是数字的是否
                        numId = id.match(/\d+/g);
                        if (numId) {
                            // 存在数字
                            id = Number(numId[0]);
                            if (isNaN(id)) {
                                id = i;
                            }
                        } else {
                            // 不存在数字
                            id = i;
                        }
                    }

                    if (id > self.vm.maxId) {
                        self.vm.maxId = id;
                    }

                    if (isFirst) {
                        data.push(list[i]);
                    }

                    if (list[i].children && list[i].children.length > 0) {
                        self.dataConversion(list[i].children, isDraw, false);
                    }
                }
                // console.log(self.vm.maxId + 1 ,self.vm.maxId , 1 );
                this.vm.currentId = Number(self.vm.maxId + 1); // 赋值最大的id
            } else {
                for (var j in list) {
                    // 只是用来计算最大的id
                    var id = list[j].id; // 获取当前的id
                    if (typeof id !== "number") {
                        // id 不是数字的是否
                        numId = id.match(/\d+/g);
                        if (numId) {
                            // 存在数字
                            id = Number(numId[0]);
                            if (isNaN(id)) {
                                id = i;
                            }
                        } else {
                            // 不存在数字
                            id = i;
                        }
                    }

                    if (id > self.vm.maxId) {
                        self.vm.maxId = id;
                    }
                }
                this.vm.currentId = Number(self.vm.maxId + 1); // 赋值最大的id
                data = list;
            }
            // console.log(data)
            this.vm.list = data; // 整体赋值
            // console.log(this.vm.list);
            this.synchToFile(); // 同步 current 和 list
            if (isDraw) {
                this.drawByList(this.vm.list); // 绘制图形
            } else {
                return data;
            }
        },
        polygonToNeed: function(points) {
            var pointsData = [];
            var type = typeof points;

            if (type === "object") {
                for (var i = 0, len = points.length; i < len; i++) {
                    pointsData.push(points[i]);
                }
            } else if (type === "string") {
                points
                    .replace(/\(|\)/g, "")
                    .replace(/ /g, ";")
                    .split(";")
                    .filter(function(item) {
                        // console.log(item);
                        if (item.indexOf(",") > 0) {
                            var num = item.split(",");
                            for (var i = 0; i < num.length; i++) {
                                num[i] = Number(num[i]);
                            }
                            pointsData.push(num);
                        }
                    });
            }
            return pointsData;
        },
        // 批量处理
        batchProcess: function() {
            this.setClick("");
        },
        // 根据数据绘制图形  新增
        drawByList: function(data) {
            svg.drawByListData(data);
        },
        // 下一条
        next: function() {
            var file = self.getFile();
            if (isNull(file.next)) {
                ui.fade("已是最后一条");
                return false;
            }
            if (self.saveResult(false, true)) {
                // 下一条触发保存 自动异步
                self.selectFile(file.next);
            }
        },
        // 上一条
        pre: function() {
            // 暂时不触发保存
            var file = self.getFile();
            if (isNull(file.last)) {
                ui.fade("已是第一条");
                return false;
            }

            if (self.saveResult(false, true)) {
                // 上一条触发保存 自动异步
                self.selectFile(file.last);
            }

            // self.selectFile(file.last);
        },
        // 获取某个文件
        getFile: function(_fileIndex) {
            if (_fileIndex === undefined) {
                return self.files.current;
            }
            var len = self.files.showList.length;
            for (var i = 0; i < len; i++) {
                var item = self.files.showList[i];
                if (item.index == _fileIndex) {
                    self.selectFile(item);
                    return item;
                }
            }
            return null;
        },
        // 自定义拖动事件 只有 拖拽有用
        customDrag: function(e) {
            if (this.vm.type === "drag" && svg.dm.drawStatus) {
                // 如果是拖动,切符合拖动条件
                svg.getPoint(e, 0); // 首先获取当前点
                svg.svgToMoveDrag(e); // 移动
            }
            svg.initWheelPoint(); // 初始化滚动参数
        },
        /**
         * 保存方法
         * @param isAuto 是否自动
         * @param async 是否异步
         * @param success 成功回调
         * @param errorMethod 失败回调
         */
        saveResult: function(isAuto, async, success, errorMethod) {
            var file = self.getFile(),
                isOk = false; // 返回值，通知是否可用继续执行
            prejudgeM(
                function() {
                    var params = {
                        lastIndex: file.id,
                        result: {
                            markTaskFileId: file.id,
                            batchId: self.base.batchId,
                            markTaskId: markTaskId,
                            stamp: file.isBad,
                            resultText: JSON.stringify(
                                self.objectToArr(file.result)
                            ),
                            isAutoSave: isAuto ? 1 : 0
                        }
                    };

                    file.saveSuccess = false; // 设置 保存状态
                    self.interactive.saveSuccess = false; // 默认设置当前数据请求尚未保存成功

                    // 先修改status代表已标注 测试
                    ass_api.saveResult(
                        {
                            markTaskId: markTaskId,
                            markFileId: file.id
                        },
                        params,
                        function() {
                            // if(!isAuto){file.status = 1;}// 已标注
                            file.saveSuccess = true;
                            file.status = 1;
                            file.lastSubmit = {
                                isLastAuto: isAuto,
                                result: JSON.stringify(file.result)
                            };
                            // self.operate.saveSuccess = true; // 数据请求成功
                            success ? success() : "";
                        },
                        async,
                        function(errorInfo) {
                            file.saveSuccess = false; // 保存失败
                            self.interactive.saveSuccess = true; // 数据请求成功
                            errorMethod ? errorMethod(errorInfo) : "";
                            // self.selectFile(item); // 跳转文件列表
                        }
                    );
                    isOk = true;
                },
                function() {
                    var count = 0,
                        content = ""; // 属性
                    if (!self.interactive.currentFinished) {
                        ui.fade("当前图片尚未加载完毕");
                        return false;
                    }

                    if (!isAuto) {
                        for (var key in self.files.current.result) {
                            // 2018/9/28 屏蔽
                            // if (self.checkType.indexOf(self.files.current.result[key].type) === -1) { // 如果没有标签属性
                            //     ui.fade('存在没有标签的框');
                            //     self.setClick(key);
                            //     return false;
                            // }
                            if (
                                self.files.current.result[key].text.length >
                                1000
                            ) {
                                // 如果内容超过 1000个字
                                ui.fade("内容框文字不能超过1000字符");
                                self.setClick(key);
                                return false;
                            }
                            count++;
                        }

                        if (!count && !self.files.current.isBad) {
                            ui.fade("至少需要一个绘图框"); // 至少需要一个标记属性的绘图框
                            return false;
                        }
                    } else {
                        try {
                            content = JSON.stringify(self.files.current.result);
                        } catch (e) {
                            content = "{}";
                        }

                        if (content === "{}") {
                            return false;
                        }
                    }
                    return true;
                },
                function() {
                    // 判断数值是否有更改
                    // 自动 判断文本变化，无论上次是手动还是自动保存
                    // 手动 上次是自动，则不比较文本变化，如果上次是手动则比较变化
                    // 文本是否有变化，有变化保存，没有变化判断是否是自动保存和手动保存下上次也是手动保存
                    // 2018/8/20 增加了判断 只有当文件
                    if (
                        isNotNull(file.lastSubmit) &&
                        isNotNull(file.lastSubmit.result) &&
                        file.lastSubmit.result == JSON.stringify(file.result) &&
                        file.status == 1
                    ) {
                        if (isAuto || file.lastSubmit.isLastAuto === isAuto) {
                            // isAuto == true 或者 isAuto 和 lastIsAuto 都为false 表示上次也是手动存储的
                            ui.fade("结果已保存"); //没有变化只给提示
                            //  if(!isAuto){ file.status = 1;} // 如果是手动保存，则更改保存状态
                            success ? success() : "";
                            isOk = true;
                            return false;
                        }
                    }
                    return true;
                }
            );
            return isOk;
        },
        // 设置选择角度
        setImgRotate: function() {
            if (this.vm.rotateDeg === 4) {
                this.vm.rotateDeg = 1;
            } else {
                this.vm.rotateDeg++;
            }
            svg.setImageAngle(this.vm.rotateDeg);
        }
    },
    filters: {
        formatTime: function(val) {
            // return parseFloat(val + '').toFixed(2)
            if (!!!val) return "00:00";
            var zNum = val < 1 ? Math.ceil(val) : parseInt(val);
            return (
                parseInt(zNum / 60) +
                ":" +
                (parseInt(zNum % 60) < 10
                    ? "0" + parseInt(zNum % 60)
                    : parseInt(zNum % 60))
            );
        },
        toDateTime: function(_value) {
            // 时间转换器
            if (_value == undefined) return "--";
            return toDateTime(_value);
        },
        takeTwoDecimal: function(val) {
            var type = typeof val;
            if (type !== "number") {
                return "100%";
            }
            return (val * 100).toFixed(2) + "%";
        }
    }
};
</script>